<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Fallrainy的样本</title>
    <link rel="shortcut icon" type="image/png" sizes="32x32" href="https://static.dingtalk.com/media/lALPJwnIxAdsGz0gIA_32_32.png">
    <link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/Nomeqc/static/js/geek-navigation/css/iconfont.css">
    <link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/Nomeqc/static/js/geek-navigation/css/style.css">
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <div class="container" id="container">
        <aside class="left-bar" id="leftBar">
            <div class="title">
                <p>非我倾城</p>
            </div>
            <nav class="nav">
                <div class="item active">
                    <a href="">
                        <i class="iconfont icon-daohang2"></i>
                        Fallrainy的样本
                    </a>
                    <i class="line"></i>
                </div>
                <ul class="nav-item" id="navItem">

                </ul>
                <!--<div class="item comment">-->
                <!--    <a target="_blank" href="#">-->
                <!--        <i class="iconfont icon-liuyan"></i>-->
                <!--        留言-->
                <!--    </a>-->
                <!--</div>-->
            </nav>
        </aside>
        <section class="main">
            <div id="mainContent">
                <!-- 手机端菜单 -->
                <div id="menu">
                    <a href="#">菜单</a>
                </div>
            </div>
        </section>
    </div>
    <script>
        var oMenu = document.getElementById('menu');
        var oBtn = oMenu.getElementsByTagName('a')[0];
        var oLeftBar = document.getElementById('leftBar');
        oBtn.onclick = function () {
            if (oLeftBar.offsetLeft == 0) {
                oLeftBar.style.left = -249 + 'px';
            } else {
                oLeftBar.style.left = 0 + 'px';
            }
            if (document.documentElement.clientWidth <= 481) {
                document.onclick = function () {
                    if (oLeftBar.offsetLeft == 0) {
                        console.log(123);
                        oLeftBar.style.left = -249 + 'px';
                    }
                }
            }
        }
    </script>
    <script>
        function elementFromString(htmlString) {
            return new DOMParser().parseFromString(htmlString, 'text/html').body.firstChild;
        }

        function loadData(data) {
            for (let item of data) {
                let name = item['name']
                let id = item['id']
                let element = elementFromString(`<li><a href="#${id}" ><i class="iconfont"></i>${name}</a></li>`)
                document.querySelector('#navItem').appendChild(element)

                var oNavItem = document.getElementById('navItem');
                var aA = oNavItem.getElementsByTagName('a');
                for (var i = 0; i < aA.length; i++) {
                    aA[i].onclick = function () {
                        for (var j = 0; j < aA.length; j++) {
                            aA[j].className = '';
                        }
                        this.className = 'active';
                    }
                }
            }

            for (let item of data) {
                renderBoxElement(item)
            }
            const footer = elementFromString(`<footer class="footer">
                            <div class="copyright">
                                <div>
                                    Copyright © 2019- 2050
                                    <a href="https://git.io/nomeqc">Nomeqc</a>
                                </div>
                            </div>
                        </footer>`)
            document.querySelector('#mainContent').appendChild(footer)
        }

        function renderBoxElement(item) {
            let name = item['name']
            let id = item['id']
            const buildItems = (items) => {
                let itemElements = []
                for (let item of items) {
                    let title = item['title']
                    let link = item['link']
                    itemElements.push(`
                        <a target="_blank" href="${link}">
                            <div class="item">
                                <div class="no-logo">${title}</div>
                            </div>
                        </a>
                    `)
                }
                return itemElements.join('\n')
            }

            let boxElement = elementFromString(`
                <div class="box">
                    <a href="" name="${id}"></a>
                    <div class="sub-category">
                        <div><i class="iconfont"></i>${name}</div>
                    </div>
                    <div>
                        ${buildItems(item['items'])}
                    </div>
                </div>`)
            document.querySelector('#mainContent').appendChild(boxElement)
        }

        function randomString() {
            const expect = 16;
            let str = Math.random().toString(36).substring(2);
            while (str.length < expect) {
                str += Math.random().toString(36).substring(2);
            }
            return str.substring(0, expect);
        }
        let api = `https://pic1.xuehuaimg.com/proxy/https://${randomString()}:${randomString()}@raw.githubusercontent.com/Nomeqc/static/master/data/sample.json`
        $.get(api, function (data) {
            loadData(data);
        }, 'json')

    </script>
</body>

</html>